<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../js/文件/css/bootstrap.min.css">
</head>
<style>
    table {
        text-align: center;
    }
    table td{
        vertical-align: center;
        line-height: 51px !important;
    }
</style>
<body>

<section style="margin-bottom: 15px">
    <!--  for 属性规定 label 绑定的表单元素
    <label> 标签的 for 属性应当与相关元素的 id 属性相同
    通过设置和 <input >元素的 id 值一致的值，绑定在这个  <input >元素上。
     <label> 的 for属性值为 "name"，   <input > 的 id 属性值也为 "name"，实现两个元素绑定。
    -->
    <label for="name" class="label label-info">姓名:</label>
    <input class="input-sm" id="name">
    <label for="age" class="label label-info">年龄:</label>
    <input class="input-sm" id="age">
    <label for="sex" class="label label-info">性别:</label>
    <input class="input-sm" id="sex">
    <label for="major" class="label label-info">专业:</label>
    <input class="input-sm" id="major">
    <label for="stuNo" class="label label-info">学号:</label>
    <input class="input-sm" id="stuNo">

    <span class="btn btn-success" id="add">添加</span>
    <span class="btn btn-warning" id="confirmModify" >确定修改</span>

</section>
<table class="table table-responsive table-bordered">
    <!--  table分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。-->
    <thead >
    <tr>
        <th>
            姓名
        </th>
        <th>
            年龄
        </th>
        <th>
            性别
        </th>
        <th>
            专业
        </th>
        <th>
            学号
        </th>
        <th>
            操作
        </th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            哈士奇
        </td>
        <td>
            3
        </td>
        <td>
            女
        </td>
        <td>
            捣蛋鬼
        </td>
        <td>
            一号
        </td>
        <td>
            <span class="btn btn-danger" data-type="del">删除</span>
            <span class="btn btn-default" data-type="modify">修改</span>
        </td>
    </tr>
    <tr>
        <td>
            金毛
        </td>
        <td>
            2
        </td>
        <td>
            男
        </td>
        <td>
            智多星
        </td>
        <td>
            二号
        </td>
        <td>
            <span class="btn btn-danger" data-type="del">删除</span>
            <span class="btn btn-default" data-type="modify">修改</span>
        </td>
    </tr>
    <tr>
        <td>
            边牧
        </td>
        <td>
            1
        </td>
        <td>
            男
        </td>
        <td>
            大将
        </td>
        <td>
            三号
        </td>
        <td>
            <!--    自定义属性值data-type  -->
            <span class="btn btn-danger" data-type="del">删除</span>
            <span class="btn btn-default" data-type="modify">修改</span>
        </td>
    </tr>
    </tbody>
</table>
</body>
<script>
    let add = document.querySelector('#add');
    //获取元素对象
    let tab = document.querySelector('table');
    let confirmModify = document.querySelector('#confirmModify');
    //const声明的变量
    //1，const修饰的变量是只读，不能修改的，即是常量
    //2，const修饰的是直接指向（修饰）的内存
    //获取输入框的值（value）
    let nameEl = document.querySelector('#name');
    let ageEl = document.querySelector('#age');
    let sexEl = document.querySelector('#sex');
    let majorEl = document.querySelector('#major');
    let stuNoEl = document.querySelector('#stuNo');

    //addEventListener()方法，即为事件监听；
    //其中第一个参数是事件的类型（“click”）
    //第二个参数是事件触发后调用的函数。
    add.addEventListener('click',function (e) {
        let  name = nameEl.value;
        let  age = ageEl.value;
        let  sex = sexEl.value;
        let  major = majorEl.value;
        let  stuNo = stuNoEl.value;

        //创建一个元素，用来存放我们需要放入的东西
        const  newtr = document.createElement('tr');
        const nameTd = document.createElement('td');
        //创建一个文本对象,获取文本
        const nameText = document.createTextNode(name);
        //添加文本节点，里面参数放获取的文本
        nameTd.appendChild(nameText);


        //创建一个元素，用来存放我们需要放入的东西
        const ageTd = document.createElement('td');
        //创建一个文本对象,获取文本
        const ageText = document.createTextNode(age);
        //添加文本节点，里面参数放获取的文本
        ageTd.appendChild(ageText);

        const sexTd = document.createElement('td');
        //创建一个文本对象,获取文本
        const sexText = document.createTextNode(sex);
        //添加文本节点，里面参数放获取的文本
        sexTd.appendChild(sexText);

        const majorTd = document.createElement('td');
        //创建一个文本对象,获取文本
        const majorText = document.createTextNode(major);
        //添加文本节点，里面参数放获取的文本
        majorTd.appendChild(majorText);


        const stuNoTd = document.createElement('td');
        //创建一个文本对象,获取文本
        const stuNoText = document.createTextNode(stuNo);
        //添加文本节点，里面参数放获取的文本
        stuNoTd.appendChild(stuNoText);

//再把添加好的td放入tr里面
        newtr.appendChild(nameTd);
        newtr.appendChild(ageTd);
        newtr.appendChild(sexTd);
        newtr.appendChild(majorTd);
        newtr.appendChild(stuNoTd);

        const actionTd = document.createElement('td');

        //加上后面删除和修改按钮创建元素
        const delBtnEl = document.createElement('span');
        //创建删除按钮中的文本
        const delBtnText = document.createTextNode('删除');
        delBtnEl.appendChild(delBtnText);
        //设置我们创建的元素名
        delBtnEl.className= 'btn btn-danger';
        delBtnEl.dataset.type = 'del';
        //修改按钮
        const modifyBtnEl = document.createElement('span');
        //创建删除按钮中的文本
        const modifyBtnText = document.createTextNode('修改');
        modifyBtnEl.appendChild(modifyBtnText);
        //设置我们创建的元素名
        modifyBtnEl.className= 'btn btn-default';
        modifyBtnEl.dataset.type = 'modify';


        actionTd.appendChild(delBtnEl);
        actionTd.appendChild(modifyBtnEl);
        newtr.appendChild(actionTd);


        //获取我们需要添加的对象，看清楚位置
        let tableEl = document.querySelector('tbody');
        //将创建好的需要添加的元素添加到表格对象中
        //先获取他的元素在添加进去
        tableEl.appendChild(newtr);

    });

    //table添加事件监听
    tab.addEventListener('click', function f(e) {
//获取自定义属性值
        //自定义属性datat-*（星号是自定义属性） data-type 获取使用dataset.*
        const type = e.target.dataset.type;
        //选择tbody，接收他
        let tb = document.querySelector('tbody');
        if(type ==='del'){
            //e.target按钮标签
            //parent寻找父级
            //e.target btn => span
            //e.target.parent父级 =》td
            //e.target.parent.parent父级的父级 =》tr
            //removeChild删除
            tb.removeChild(e.target.parentNode.parentNode)
        }else {
            //children.length字节长度
            for ( let x= 0;x<tb.children.length;x++ ){
                if(tb.children[x].dataset.isModify){
                    tb.children[x].dataset.isModify = 0;
                }
            }

            e.target.parentNode.parentNode.dataset.isModify = 1;
            //子节点children，返回一个数组
            let tdCollections = e.target.parentNode.parentNode.children;
            for(let i =0;i<tdCollections.length-1;i++){
                //循环tdCollections里面数组每个的的innerHTML内部文本
                // console.log(tdCollections[i].innerHTML)
                if(i === 0){
                    nameEl.value = '';
                    nameEl.value = tdCollections[i].innerHTML
                }
                if(i === 1){
                    ageEl.value = '';
                    ageEl.value = tdCollections[i].innerHTML
                }
                if(i === 2){
                    sexEl.value = '';
                    sexEl.value = tdCollections[i].innerHTML
                }
                if(i === 3){
                    majorEl.value = '';
                    majorEl.value = tdCollections[i].innerHTML
                }
                if(i === 4){
                    stuNoEl.value = '';
                    stuNoEl.value = tdCollections[i].innerHTML
                }
            }
        }
    });
    confirmModify.addEventListener('click',function (e) {
        let name = nameEl.value;
        let age = ageEl.value;
        let sex = sexEl.value;
        let major = majorEl.value;
        let stuNo = stuNoEl.value;

        let tb = document.querySelector('tbody');
        for (let i = 0;i<tb.children.length;i++){
            if (tb.children[i] .dataset.isModify === '1'){
                tb.children[i].children[0].innerText = name;
                tb.children[i].children[1].innerText = age;
                tb.children[i].children[2].innerText = sex;
                tb.children[i].children[3].innerText = major;
                tb.children[i].children[4].innerText = stuNo;
                tb.children[i].dataset.isModify = 0
            }}
        nameEl.value  = '';
        ageEl.value = '';
        sexEl.value = '';
        majorEl.value = '';
        stuNoEl.value = '';
    })
</script>
</html>